<template>
  <el-table
      :data="list"
      style="width: 100%">
    <el-table-column
        prop="date"
        label="日期"
        width="180">
      <template #default="{row}">
        <el-select v-model="row.a" placeholder="placeholder" @change="onChange" clearable @visible-change="onVisibleChange($event,row)">
          <el-option
              v-for="item in filterOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          >
          </el-option>
        </el-select>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup>

const list = ref([{date: '2016-05-02'}, {date: '2016-05-04'}, {date: '2016-05-08'}])
const oldOptions = ref([{value: 111, label: '111'}, {value: 222, label: '222'}, {value: 333, label: '333'}])
const filterOptions = ref([{value: 111, label: '111'}, {value: 222, label: '222'}, {value: 333, label: '333'}])
const onChange = () => {
  filterOptions.value = oldOptions.value.filter(j => !list.value.some(k => k.a === j.value))
}
const onVisibleChange = (flag, row) => {
  const index = filterOptions.value.findIndex(j => +j.value === row.a)
  if (flag && row.a && index === -1) {
    filterOptions.value.push(oldOptions.value.find(j => j.value === row.a))
  }
  if (!flag && index !== -1 && row.a) {
    if (index !== -1) filterOptions.value.splice(index, 1)
  }
}
</script>

